/**
 * 帮助文档
 */
import React from 'react';
import { Row, Col, Collapse } from 'antd';
require('./style.less');

export default class Help extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    render() {
        return (
            <Row className="help-container" style={{ marginTop: 15 }}>
                <Col
                    xs={{ span: 24 }}
                    sm={{ span: 22, push: 1 }}
                    md={{ span: 20, push: 2 }}
                    lg={{ span: 18, push: 3 }}
                    xl={{ span: 16, push: 4 }}
                >
                    <h1 style={{ padding: 10 }}>
                        帮助文档
                        <span style={{ fontSize: 14, marginLeft: 15 }}>
                            <a href="#" onClick={event => {
                                event.preventDefault();
                                // eslint-disable-next-line
                                this.props.history.push('/signin');
                            }}>登录</a>
                            <span className="ant-divider" />
                            <a href="#" onClick={event => {
                                event.preventDefault();
                                // eslint-disable-next-line
                                this.props.history.push('/signup');
                            }}>注册</a>
                        </span>
                    </h1>
                    <Collapse className="help-doc" defaultActiveKey={['1']}>
                        <Collapse.Panel header="步骤一" key="1">
                            <p>欢迎使用中非可再生能源技术转移系统！</p>
                            <p><br/></p>
                            <p>本网站分为专家和企业两种用户身份，其中个人账户对应专家角色，企业账户对应企业角色，如图1所示，注册栏默认为专家角色注册，可通过点击注册栏上方标签页进行更改。</p>
                            <div className="img-box"><img src={`${require('./step1.png')}`} /></div>
                        </Collapse.Panel>
                        <Collapse.Panel header="步骤二" key="2">
                            <p>在注册栏中分别输入用户名，邮箱地址（专家角色请输入个人邮箱，企业角色请输入联系人邮箱），密码以及注册栏右下角所示的验证码（不区分大小写），点击注册，如下图所示</p>
                            <img src={`${require('./step2.png')}`} />
                        </Collapse.Panel>
                        <Collapse.Panel header="步骤三" key="3">
                            <p>请严格按照输入文本框提示严格填写，如果有不符合规则的地方，系统会在右上角提示，如下图所示</p>
                            <img src={`${require('./step3.png')}`} />
                            <p>当完全按照要求填写完成注册信息之后点击注册，即可完成注册，点击下方登录按钮登录系统。</p>
                            <p><br/></p>
                            <p>现在开始您的可再生能源技术转移之旅吧！</p>
                        </Collapse.Panel>
                    </Collapse>
                </Col>
            </Row>
        );
    }
}